﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>In this example is demonstrated how to populate the jqxChart with data from MySQL Database</title> 
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
	<script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
	<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
	<script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script>	
	<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>	
	<script type="text/javascript">
		$(document).ready(function () {
			// prepare the data
			var theme = 'classic';
	  
			var source =
			{
				datatype: "json",
				datafields: [
				{ name: 'OrderDate', type: 'date'},
				{ name: 'Quantity'},
				{ name: 'ProductName'}
				],
				url: 'chartdata.php'
			};		
			
			var dataAdapter = new $.jqx.dataAdapter(source,
			{
				autoBind: true,
				async: false,
				downloadComplete: function () { },
				loadComplete: function () { },
				loadError: function () { }
			});
			
		    // prepare jqxChart settings
			var settings = {
			    title: "Orders by Date",
			    showLegend: true,
			    padding: { left: 5, top: 5, right: 50, bottom: 5 },
			    titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
			    source: dataAdapter,
			    xAxis:
				{
				    text: 'Category Axis',
				    textRotationAngle: 0,
				    dataField: 'OrderDate',
				    type: 'date',
				    baseUnit: 'month',
				    formatFunction: function (value) {
				        return $.jqx.dataFormat.formatdate(value, 'dd/MM/yyyy');
				    },
				    showTickMarks: true
				},
			    colorScheme: 'scheme05',
			    seriesGroups:
				[
					{
					    type: 'line',
					    valueAxis:
						{
						    displayValueAxis: true,
						    description: 'Quantity',
						    axisSize: 'auto',
						    tickMarksColor: '#888888',
						    unitInterval: 20,
						    minValue: 0,
						    maxValue: 100
						},
					    series: [
                            { dataField: 'Quantity', displayText: 'Quantity' }
					    ]
					}
				]
			};

			// setup the chart
			$('#jqxChart').jqxChart(settings);
		});
	</script>
</head>
<body class='default'>
      <div style="width:690px; height:400px" id="jqxChart"></div>
</body>
</html>
<!--chartdata.php
#Include the connect.php file
include ('connect.php');

// Connect to the database
// connection String
$mysqli = new mysqli($hostname, $username, $password, $database);
/* check connection */
if (mysqli_connect_errno())
	{
	printf("Connect failed: %s\n", mysqli_connect_error());
	exit();
	}
// get data and store in a json array
$from = 0;
$to = 100;
$query = "SELECT OrderDate, ProductName, Quantity FROM  invoices ORDER BY OrderDate LIMIT ?,?";
$result = $mysqli->prepare($query);
$result->bind_param('ii', $from, $to);
$result->execute();
/* bind result variables */
$result->bind_result($OrderDate, $ProductName, $Quantity);
/* fetch values */
while ($result->fetch())
	{
	$orders[] = array(
		'OrderDate' => $OrderDate,
		'ProductName' => $ProductName,
		'Quantity' => $Quantity
	);
	}
echo json_encode($orders);
/* close statement */
$result->close();
/* close connection */
$mysqli->close();
-->